<template>
	<u-form labelWidth="auto">
		<view>
			<view style="display: flex">
				<view>
					<view class="option" style="width: 396rpx">
						<view class="lf">{{ relBillType=='1'?'冲账借款单据':'冲账付款单单据' }}</view>
						<view class="rl">
							{{ item.relBillId ? relBillType=='1'?filterMultiDictText(this.dictOptions['relLoanBillId'], item.relBillId + ''):filterMultiDictText(this.dictOptions['relPayBillId'], item.relBillId + '') : '' }}
						</view>
					</view>
					<template v-if="relBillType==1">
						<view class="option" style="width: 396rpx">
							<view class="lf">借款金额(元)</view>
							<view class="rl">{{ item.borrowLoanAmount }}</view>
						</view>
						<view class="option" style="width: 396rpx">
							<view class="lf">已还金额(元)</view>
							<view class="rl">{{ item.borrowOnloanAmount }}</view>
						</view>
					</template>
					<template v-if="relBillType==2">
						<view class="option" style="width: 396rpx">
							<view class="lf">预付款金额(元)</view>
							<view class="rl">{{ item.payPayableAmount }}</view>
						</view>
						<view class="option" style="width: 396rpx">
							<view class="lf">已冲账金额(元)</view>
							<view class="rl">{{ item.payOnChargedAmount }}</view>
						</view>
					</template>
					<view class="option" style="width: 396rpx">
						<view class="lf">本次冲账金额(元)</view>
						<view class="rl">{{ item.chargedAmount }}</view>
					</view>
					<view class="option" style="width: 396rpx">
						<view class="lf">剩余未冲账金额(元)</view>
						<view class="rl">{{ item.unChargedAmount }}</view>
					</view>
				</view>

				<view style="flex: 1; display: flex; align-items: center; justify-content: flex-end">
					<u-icon name="edit-pen-fill" color="#2979ff" size="20" v-if="showButton || showFlowSubmitButton"
						@click.native.stop="handleEidtForm(item, index)"></u-icon>
						<template v-if="showButton || !showFlowSubmitButton">
							<u-line direction="col" length="20" margin="0 10rpx" ></u-line>
							<u-icon name="trash-fill" color="red" size="20" @click.native.stop="handleRemoveForm(item)"></u-icon>
						</template>
				</view>
			</view>
		</view>
	</u-form>
</template>

<script>
	import {
		initDictOptions,
		filterMultiDictText
	} from '@/utils/JDictSelectUtil.js'
	import address from '@/utils/address.js'

	export default {
		name: 'ReversePaymentFormInfo',
		props: {
			index: {
				type: Number,
				default: null,
			},
			item: {
				type: Object,
				default: () => ({}),
			},
			relBillType:{
				type: String,
				default: null
			},
			showButton: {
				type: Boolean,
				default: true
			},
			showFlowSubmitButton: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				address,
				filterMultiDictText,
			}
		},
		inject: ['dictOptions'],
		methods: {
			handleEidtForm(item) {
				this.$emit('edit', [item, this.index])
			},
			handleRemoveForm(item) {
				uni.showModal({
					content: '确定删除吗？',
					success: (res) => {
						if (res.confirm) {
							this.$emit('remove', item)
						}
					},
				})
			},
		},
	}
</script>

<style scoped></style>